<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>原型链</title>
    <script>
    /**prototype  __proto__  关联*/
    /*
    函数对象 有 prototype 和 __proto__
    普通对象 有   __proto__
    */
    window.onload = function(){

        //关系分析
        function Animal(){
            this.type = "动物";
        };
        Animal.prototype.type2 = "动物2";
        function Cat(name,color){
            this.name = name;
            this.color = color;
        };
        Cat.prototype = Animal.prototype;
        var cat = new Cat("花猫","花色");
        console.log(cat.type2);
        //Animal包括：prototype(constructor,type2),type
        //Cat 包括: prototype(constuctor),name,color
        //cat 实例化,属于普通对象，有__proto__属性,指向函数的原型对象
        //constructor 指向 函数对象

        //关系示例代码
        function Person(){}
        Person.prototype.makefriends = function(){};
        var person = new Person();

        function People(){
            this.name = 'Hanley0';
            this.sayName = function(){};
        };
        People.prototype.name="hanley1"
        People.prototype.walk = function(){};
        var p1 = new People();
        p1.name = 'p1'
        p1.sayName = function(){console.log('p1')};
        console.log(p1.name);
        console.log(p1.sayName());


        //原型链
        function F1(){
            this.name = "n1";
        };
        F1.prototype.name1 = 'proto-name1';
        function F2(){
           this.name = "n2";
        };
        function F3(){
            this.name = "n3";
        };
        F2.prototype = new F1();
        F3.prototype = new F2();
        var ff = new F3();
        console.log(ff.__proto__.name);
        //这里特别注意,__proto__指向的是当前函数的 原型对象
        ff.__proto__.__proto__.__proto__.name1 = 'abc';//修改F1.prototype.name1
        console.log(ff.name1);
        //delete ff.__proto__.__proto__.__proto__.name1;//删除 F1.prototype.name1，避免使用

        //原型链 ：构造函数、原型、实例、之间的关系
        //函数对象中有 prototype属性 ,原型对象prototype中有constructor,指向他所属的函数对象
        //对象都有 __proto__ 属性， 指向函数对应的 原型对象



    };
    </script>
</head>
<body>
    
</body>
</html>